import { GButton } from '@/components/GButton';
import useEvent from '@/hooks/useEvent';
import useInputState from '@/hooks/useInputState';
import { GStyleSheet } from '@/utils/DarkMode';
import { Input, View } from '@tarojs/components';
import I18n from 'i18n-js';
import React from 'react';

const dstyles = GStyleSheet.create({
  container: {
    padding: '0 32rpx',
    marginTop: 26,
  },
  input: {
    border: '2rpx solid #EEEEEE',
    borderRadius: 4,
    marginBottom: 12,
    height: 48,
    padding: '0 30rpx'
  },
  tipsIcon: {
    width: 16,
    height: 16,
    marginRight: 7,
  },
  btn: {
    width: '100%',
  },
});

interface Props {
  onAdd(nickname: string, mobile: string): Promise<any>;
}

const AddContact: React.FC<Props> = React.memo(({ onAdd }) => {
  const styles = dstyles.style;
  const [nickname, changeNickname, setNickname] = useInputState();
  const [mobile, changeMobile, setMobile] = useInputState();

  const handleAdd = useEvent(() => {
    onAdd(nickname, mobile).then((res) => {
      if (res.success) {
        setNickname('');
        setMobile('');
      }
    })
  });

  return (
    <View style={styles.container}>
      <Input
        style={styles.input}
        value={nickname}
        placeholder={I18n.t('PLEASE_INPUT_NICKNAME')}
        maxlength={64}
        onInput={changeNickname}
      />
      <Input
        style={styles.input}
        value={mobile}
        placeholder={I18n.t('PLE_INPUT_PHONE')}
        type='digit'
        maxlength={11}
        onInput={changeMobile}
      />
      <GButton
        text={I18n.t('ADD')}
        style={styles.btn}
        disabled={!mobile || !mobile.match(/^\d{11}$/)}
        onPress={handleAdd}
      />
    </View>
  );
});

export default AddContact;
